<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻书</title>
    <meta name="description" content="翻书">
    <meta name="keywords" content="翻书">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
   <!--  <link rel="stylesheet" href="common.css"> -->
    <style>
        .btn {
          background: none;
          border: none;
          line-height: normal;
          cursor: pointer;
          outline: none;
          font-family: "Microsoft Yahei"; }
        #magazine .turn-page{
            background-color:#ccc;
            background-size:100% 100%;
        }
        main{
            overflow: hidden;
            background: url("img/bg2.png") no-repeat;
            -webkit-justify-content: space-between;
            background-size: cover;
        }
        .pagination {
            display: -webkit-flex;
            -webkit-justify-content: space-between;
            -webkit-align-items: center;
            margin-top: 5%;
            padding: 0 5%; }
        .pagination .btn {
            padding: 5px 10px;
            color:#000;
            font-size: 14px; }
    </style>
</head>
<body>
    <div class="book">
        <div class="main">
            <div id="magazine">
                <div style="background-image:url(img/book3.png);">
                    <p style="font-size:30px;margin: 150px;">首页</p>
                </div>

            </div>
        </div>
        <div class="pagination" id="pagebut">
            <button class="btn prev" style="visibility:hidden">上一页</button>
            <button class="btn next">下一页</button>
        </div>
        <div class="pagination" id="gobackbtn" style="display: none;">

        </div>
    </div>
    <input type="hidden" value="7" id="page_nums" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="js/turn.min.js"></script>
    <script src="js/js.js"></script>
    <!-- 注：
1）jquery插件库：http://www.jq22.com/
2）使用插件（turn.js）官网说明：http://www.turnjs.com/docs/Main_Page
3）插件示例代码：http://www.jq22.com/jquery-info2534


————————————————
版权声明：本文为CSDN博主「kirsten_z」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kirsten_z/article/details/78328577 -->
</body>
</html>
<script>
  $(function(){
    //------------- 翻书init start ------------
    //  book 初始化
    $('#magazine').turn({
        pages: $('#page_nums').val(),//总页数
        display: 'single',
        acceleration: true,
        gradients: !$.isTouch,
        width:  $(window).width()*0.9,
        height: $(window).height()*0.834,
        elevation:50,/*
            turnCorners: "bl,br",*/
        when: {
            turning: function(e, page, view) {
                $("#magazine").turn("disable");
                // Gets the range of pages that the book needs right now
                var range = $(this).turn('range', page);
                // Check if each page is within the book
                for (page = range[0]; page<=range[1]; page++)
                    addPage(page, $(this));
            },
            turned: function(e, page) {
                $('#page-number').val(page);
                if(page==1){
                    $('.prev').css('visibility','hidden');
                }
                if(page >= 2){
                    var page = $("#magazine").turn('page');
                    //显示 上一页按钮显示
                    $('.prev').css('visibility','visible');
                    $('.next').css('visibility','visible');
                }
                if(page == $("#magazine").turn('pages')-1){
                    //最后一页 下一页按钮消失
                    $('.next').css('visibility','hidden');
                }
            }
        }
    });

    //  上下翻页
    $('.next').on("click",function () {
        $('#magazine').turn("next");
        var page = $("#magazine").turn('page');
        if(page == 2){
            //显示 上一页按钮显示
            $('.prev').css('visibility','visible')
        } else if(page == $("#magazine").turn('pages')-1){
            //最后一页 下一页按钮消失
            $('.next').css('visibility','hidden')
        }
    });
    $('.prev').on("click",function () {
        $('#magazine').turn("previous");
        var page = $("#magazine").turn('page');
        if(page == 1){
            //首页上一页 按钮消失
            $('.prev').css('visibility','hidden')
        } else if(page == $("#magazine").turn('pages')-2){
            //倒数第二页 显示 下一页 按钮
            $('.next').css('visibility','visible')
        }
    });
    //------------- 翻书init end --------------
});

// Adds the pages that the book will need
function addPage(page, book)
{
    var pages =$('#page_nums').val();//总页数
    //  First check if the page is already in the book
    if (!book.turn('hasPage', page)) {
        // Create an element for this page
        var element = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
        // If not then add the page
        book.turn('addPage', element, page);
        // Let's assum that the data is comming from the server and the request takes 1s.
        setTimeout(function(){
            var sHtml = '<div class="data" style="margin:100px;"><p>Data for page '+page+'</p><a href="javascript:void(0)" onclick="showDetail()">点击进入详情页</a></div>';
            element.html(sHtml);
        }, 1000);
    }
}

//detail page
function showDetail()
{
    //详情页数据
    var sHtml = '<div class="data" style="margin:80px;">welcome to detail page *^_^* </div>';
    //获取 当前页 页码
    var currentPage = $("#magazine").turn('page');
    //获取 最后一页 页码，作为详情页
    var iDetailIndex = $("#magazine").turn('pages');
    iDetailIndex = parseInt(iDetailIndex);
    //分类标签按钮展示处理
    $('#pagebut').hide();
    $("#gobackbtn").html('<button class="btn"></button><button class="btn" onclick="gobacklist(' + currentPage + ');">返回</button>');
    $('#gobackbtn').show();
    //新增并跳转到详情页
    $('#magazine').turn("addPage", sHtml, iDetailIndex);
    $('#magazine').turn("page", iDetailIndex);
}

//详情页返回列表页
function gobacklist(listPage)
{
    //返回list
    $('#magazine').turn('page', listPage);
    //处理按钮展示
    if ($('#pagebut').css('display', 'none')) {
        $("#gobackbtn").html('');
        $('#gobackbtn').hide();
        $('#pagebut').show();
    }
}

</script>